<template>
  <div class="countDown">
    <div class="position">
      <canvas id="canvas"></canvas>
      <img src="../assets/img/开始倒计时bg.jpg" alt="" class="bgImg" />
    </div>
    <div class="timeBox">
      <p>119狂欢开始倒计时</p>
      <div class="position">
        <flip-countdown
          deadline="2022-11-09 00:00:00"
          @timeElapsed="timeElapsedHandler"
        ></flip-countdown>
        <!-- <TimeCoundDown deadline="2021-11-09 00:00:00"
          @timeElapsed="timeElapsedHandler" /> -->
        <img src="../assets/img/开始倒计时、_03.png" alt="" class="imgTime" />
      </div>
    </div>
  </div>
</template>

<script>
import FlipCountdown from "vue2-flip-countdown";
import TimeCoundDown from "../components/FlipCountdown";
export default {
  components: { FlipCountdown, TimeCoundDown },
  data() {
    return {
      nowData: {},
    };
  },
  created() {
    this.nowData = this.$children;
  },
  mounted() {
    this.drawCanvas();
    let dom1 = document.querySelectorAll(".flip-clock__slot");
    for (let i = 0; i < dom1.length; i++) {
      dom1[i].innerHTML = ":";
      dom1[i].classList.add("mystyle");
    }
  },
  methods: {
    drawCanvas() {
      var _createClass = (function () {
        function defineProperties(target, props) {
          for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value" in descriptor) descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor);
          }
        }
        return function (Constructor, protoProps, staticProps) {
          if (protoProps) defineProperties(Constructor.prototype, protoProps);
          if (staticProps) defineProperties(Constructor, staticProps);
          return Constructor;
        };
      })();
      function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
          throw new TypeError("Cannot call a class as a function");
        }
      }
      var Line = (function () {
        function Line(x, y, size, color, speed, seed, amplitude) {
          _classCallCheck(this, Line);
          this.x = x;
          this.y = y;
          this.size = size;
          this.color = color;
          this.speed = speed;
          this.seed = seed;
          this.amplitude = amplitude;
          this.i = this.seed;
        }
        _createClass(Line, [
          {
            key: "update",
            value: function update() {
              this.y -= this.speed;
              this.i += this.seed;
            },
          },
          {
            key: "draw",
            value: function draw(canvas) {
              var x = this.x + Math.sin(this.i) * this.amplitude;

              canvas.ctx.beginPath();
              canvas.ctx.fillStyle = this.color;
              canvas.ctx.shadowColor = this.color;
              canvas.ctx.shadowBlur = 5;
              canvas.ctx.arc(x, this.y, this.size, 0, 2 * Math.PI);
              canvas.ctx.fill();
              canvas.ctx.closePath();
            },
          },
        ]);
        return Line;
      })();
      var Canvas = (function () {
        function Canvas(ctx, w, h) {
          _classCallCheck(this, Canvas);
          this.ctx = ctx;
          this.width = w;
          this.height = h;
          this.scale = 1.0;
          this.lines = [];
        }
        _createClass(Canvas, [
          {
            key: "pushParticle",
            value: function pushParticle() {
              var x = Math.random() * this.width;
              var y = this.height + Math.random() * 250;
              var size = 1 + Math.random();

              var g = Math.floor(0 + Math.random() * 50);
              var b = Math.floor(0 + Math.random() * 50);
              var color = "rgba(244," + g + "," + b + ",0.7)";

              var speed = 2 + Math.random() * 1.5;
              var seed = Math.random() / 20;
              var amp = Math.random() * 1;

              this.lines.push(new Line(x, y, size, color, speed, seed, amp));
            },
          },
          {
            key: "start",
            value: function start() {
              for (var i = 0; i < 100; i++) {
                this.pushParticle();
              }
            },
          },
          {
            key: "update",
            value: function update() {
              for (var i = 0; i < this.lines.length; i++) {
                var line = this.lines[i];

                line.update();
              }

              this.lines = this.lines.filter(function (line) {
                return line.y > -2;
              });

              var toAdd = 100 - this.lines.length;

              if (toAdd === 0) {
                return;
              }

              for (var _i = 0; _i < toAdd; _i++) {
                this.pushParticle();
              }
            },
          },
          {
            key: "draw",
            value: function draw() {
              this.ctx.shadowColor = "#000";
              this.ctx.shadowBlur = 0;
              this.ctx.globalCompositeOperation = "destination-out";
              this.ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
              this.ctx.fillRect(0, 0, this.width, this.height);
              this.ctx.globalCompositeOperation = "lighter";

              for (var i = 0; i < this.lines.length; i++) {
                var line = this.lines[i];

                line.draw(this);
              }
            },
          },
        ]);
        return Canvas;
      })();

      (function (_) {
        var canvasElement = document.getElementById("canvas"),
          ctx = canvasElement.getContext("2d"),
          canvas = new Canvas(ctx);
        var w = (canvasElement.width = window.innerWidth),
          h = (canvasElement.height = window.innerHeight),
          density = 1;

        function setup() {
          window.addEventListener("resize", resize);

          density =
            window.devicePixelRatio != undefined
              ? window.devicePixelRatio
              : 1.0;

          canvasElement.width = w * density;
          canvasElement.height = h * density;
          canvas.width = w;
          canvas.height = h;
          canvas.scale = density;

          ctx.scale(density, density);

          canvas.start();

          draw();
        }

        function draw() {
          canvas.update();
          canvas.draw();

          window.requestAnimationFrame(draw);
        }

        function resize() {
          w = canvasElement.width = window.innerWidth;
          h = canvasElement.height = window.innerHeight;

          canvasElement.width = w * density;
          canvasElement.height = h * density;

          canvas.width = w;
          canvas.height = h;

          ctx.scale(density, density);
        }

        setup();
      })();
    },
    timeElapsedHandler() {
      /* 
        参数type:
        inward：对内有加盟、
        inwardUser：对内无盟友、
        foreignDataUser：对外无盟友、
        foreignData：对外有盟友
      */
      if (this.$route.query.type == "inward") {
        this.$router.push("/inward");
      } else if (this.$route.query.type == "inwardUser") {
        this.$router.push("/inwardUser");
      } else if (this.$route.query.type == "foreignDataUser") {
        this.$router.push("/foreignDataUser");
      } else {
        this.$router.push("/");
      }
    },
  },
};
</script>

<style lang="less" scoped>
body {
  background: #000;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.bgImg {
  vertical-align: middle;
  width: 100%;
}
.countDown {
  margin: 0 auto;
  position: relative;
  .timeBox {
    position: absolute;
    top: 313px;
    z-index: 10;
    left: 0;
    right: 0;
    p {
      font-size: 55px;
      font-weight: 700;
      text-align: center;
      color: #fff666;
      letter-spacing: 11px;
      margin-bottom: 62px;
    }
  }
  /deep/.flip-clock {
    // display: flex;
    // justify-content: center;
    .flip-card__top,
    .flip-card__bottom,
    .flip-card__back-bottom,
    .flip-card__back::before,
    .flip-card__back::after {
      width: 146px;
      height: 73px;
      background: #f42424;
      color: #fff666;
    }
    .flip-card__bottom,
    .flip-card__back-bottom,
    .flip-card__bottom-4digits,
    .flip-card__back-bottom-4digits {
      border-top: 1px dashed rgba(243, 161, 161, 1);
    }
    .flip-card {
      font-size: 96px;
      font-weight: 700;
      text-align: center;
      color: #fff666;
    }
    .flip-clock__piece {
      margin-right: 78px;
    }
    .flip-clock__slot {
      color: #fff666;
      display: none;
    }
  }
  .position {
    position: relative;
    .imgTime {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -438px;
      width: 864px;
    }
  }
}
</style>